<template>
	<view class="submitEva p-3">
		<view><text style="color: red;">*</text>星级评价</view>
		<view class="mt-2">
			<uni-rate v-model="RateValue" @change="onChange" size="40" />
		</view>
		<view class="mt-3">上传图片</view>
		<view class="mt-3">
			<uni-file-picker v-model="imageValue" limit="3" fileMediatype="image" mode="grid" @select="select"
				:image-styles="imageStyles" @progress="progress" @success="success" @fail="fail">
				<template #default>
					<view class="default flex flex-column align-center justify-center"
						style="background-color: #f5f5f5;width: 100%;height: 100%;">
						<view style="height: 60rpx; width: 60rpx;">
							<image src="../../static/icon/upImg.png" mode="" class="img"></image>
						</view>
						<view class="font-sm mt-4">传照片/选填</view>
					</view>
				</template>
			</uni-file-picker>
		</view>
		<view class="mt-3"><text style="color: red;">*</text>评价描述</view>
		<view class="mt-3 ">
			<textarea @blur="bindTextAreaBlur" auto-height placeholder="请在此处描述您的留言" class="font-sm" :value="textarea" />
		</view>
		<view class="fixed-bottom my-2" @click="submitEvalate">
			<view class="btn font-weight-bold">提交评价</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import request from '../../api/index.js'
	import {
		upLoadImage
	} from '../../api/common.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const RateValue = ref(3)
	const imageValue = ref([])
	const textarea = ref('')
	const evalateId = ref('')
	const imageStyles = {
		border: {
			radius: '16rpx',
		},
	}

	onLoad((options) => {

		console.log("options.id----------", options.data)
		evalateId.value = options.data


	})
	const bindTextAreaBlur = (e) => {
		textarea.value = e.detail.value

	}
	const select = (e) => {
		upLoadImage(e.tempFilePaths[0], imageValue.value)
			.then((result) => {
				console.log('上传成功后的结果:', result);
				imageValue.value = result
				// 这里可以继续处理 result
			})
			.catch((error) => {
				console.error('上传失败:', error);
				// 这里可以处理上传失败的情况
			});
	}
	//文件上传时触发
	const progress = () => {

	}
	const success = () => {

	}
	const fail = () => {

	}
	const onChange = (e) => {
		RateValue.value = e.value
	}



	const submitEvalate = () => {

		if (!textarea.value) {
			uni.showToast({
				title: '请输入文本框',
				icon: 'error'
			})
			return
		}
		let userDataInfo = {}
		uni.getStorage({
			key: 'userData',
			success(e) {
				console.log("e==========",e);
				userDataInfo = e.data
			},
		
		});
		const formData = {
			volunteerId: evalateId.value,
			starRating: RateValue.value,
			describe: textarea.value,
			imgs: imageValue.value,
			name: userDataInfo.id
		}
		request({
			url: '/api/volunteer/evaluation-management/addEvaluation',
			method: 'POST',
			data: formData
		}, e => {
			if (e.success) {
				console.log('e-------------', e)
				uni.showToast({
					title: '提交成功',
					icon: 'success'
				})
				uni.navigateBack(-1)
			} else {
				uni.showToast({
					title: e.errorMessage,
					icon: 'error'
				})
			}
		})
	}
</script>

<style lang="scss" scoped>
	.submitEva {

		// background-color: pink;
		.default {
			color: #999999;
		}

		.fixed-bottom {
			width: 100%;
			// background-color: #999999;
			text-align: center;
			box-sizing: border-box;
			padding: 20rpx 40rpx;

			.btn {
				padding: 30rpx;
				border-radius: 50rpx;
				background-image: linear-gradient(#9ba3ff, #253bff);
				color: #fff;
			}
		}
	}

	.img {
		width: 100%;
		height: 100%;
	}
</style>